<template>
  <div class="my_person">
    <div class="btnM">个人中心</div>
    <div style="clear:both"></div>
    <div class="photo"></div>
    <div class="info">{{name}}</div>
    <div class="info">{{sex}}</div>
    <mt-cell to="/updataMy" title="个人信息修改" is-link></mt-cell>
    <mt-cell to="/myList" title="我的订单" is-link></mt-cell>
    <mt-cell to="/updataPsd" title="修改密码" is-link></mt-cell>
    <mt-button @click="outLogin()" class="btnC" size="large" type="primary">退出登陆</mt-button>
  </div>
</template>

<script>
import cookie from 'js-cookie'

export default {
  name: 'my_person',
  data() {
    return {
      name: cookie.get('userName'),
      sex: cookie.get('sex'),
    }
  },
  methods: {
    outLogin() {
      const userName = cookie.get('userName');
      cookie.set('userName',userName,{
        expires: -1,
      });
      this.$router.push({ name: 'login'});
    }
  },
}
</script>
<style scoped>
.my_person{
  width: 100%;
  text-align: center;
}
.btnM{
  float: left;
  background-color: rgb(235,235,235);
}
.photo{
  margin: 0 auto;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 1px solid gray;
}
.btnC{
  margin: 3rem 0;
}
.info{
  margin: 1rem 0;
  color: red;
}
</style>

